<template>
  <div class="exam-container">
      <el-skeleton :loading="data.isFirst" :rows="15" animated>
      <div class="head-content-search">
       <div style="display: flex">
        <div style="flex:1">
          
        </div>

          <el-date-picker
            style="flex:1;margin-right:20px"
        v-model="searchDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="data.defaultTime"
        @change="date_Change"
       
      />

       
        <div style="flex:1">
          
        </div>
      
      </div>
    </div>





    <div style="margin-top: 10px">
      <el-table :data="data.data.data" v-loading="data.isLoad" :border="true">
        <el-table-column label="序号" type="index" width="60px"></el-table-column>
        <el-table-column
          label="用户"
          prop="account"
          :show-overflow-tooltip="true"
          class="last_commoner"
        >
        
        <template #default="scope">
          <el-tag type="primary" v-if=" scope.row.account==null">
              -
          </el-tag>
          <el-tag type="success" v-else>
             {{ scope.row.account }}
          </el-tag>
        </template>
        </el-table-column>

        <el-table-column
          label="错误消息"
          prop="message"
          :width="300"
          :show-overflow-tooltip="true"
          class="last_commoner"
        >
        </el-table-column>

        <el-table-column
          label="参数"
          prop="paras"
          :width="250"
          :show-overflow-tooltip="true"
          class="last_commoner"
        >
        </el-table-column>

        <el-table-column
          label="接口"
          prop="url"
          :width="250"
          :show-overflow-tooltip="true"
          class="last_commoner"
        >
        </el-table-column>

        <el-table-column
          label="ip"
          prop="ip"
          :width="150"
          :show-overflow-tooltip="true"
          class="last_commoner"
        >

        </el-table-column>

        
        <el-table-column
          label="时间"
          prop="createTime"
          :show-overflow-tooltip="true"
          class="last_commoner"
        >
        </el-table-column>
      
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 10px; padding-bottom: 10px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="data.pages.total"
          small
          :page-size="data.pages.limit"
          v-model:current-page="data.pages.page"
        />
      </div>
    </div>



  </el-skeleton>
      </div>
</template>

<script lang="ts" setup>
import { onMounted, ref,reactive, watchEffect } from 'vue'
import { Search } from '@element-plus/icons-vue'
import {getErrors} from '../../api/logs'
import timestampToTime from '../../utils/getTime'
const searchDate:any = ref('');
let data = reactive({
  options:[],
  pages:{
      limit:10,
      page:1,
      keys:'',
      total:0
  },
  type:"",
  begin:"",
  end:"",
  data:{
    data:[]
  },
  isLoad:true,
  isFirst:true,
  defaultTime:''
});

//日期改变事件
const date_Change=()=>{
if(searchDate._rawValue!=null && searchDate._rawValue.length!=0){
  data.begin=timestampToTime.timestampToTime(new Date(searchDate._rawValue[0]).getTime());
  data.end=timestampToTime.timestampToTime(new Date(searchDate._rawValue[1]).getTime());
}
if(searchDate._rawValue==null){
  data.begin="";
  data.end=""
}  
}

//获取行为数据
const getError=()=>{
  data.isLoad=true;
  getErrors(
      {
       page:data.pages.page,
      limit:data.pages.limit,
      begin:data.begin,
      end:data.end
  }
      ).then((res:any)=>{
      if(res.result===0){
          data.data=res.data;
          data.pages.total=res.data.total;   
         data.isLoad=false;
         data.isFirst=false;
         console.log(data.data);
         
          
      }
  });
} 



onMounted(() => {
  getError();
})

watchEffect(()=>{
  getError();
})

</script>